'use strict';

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import MainNotice from 'components/main-notice/index';
import * as actions from '../../actions/home';
import Tab from 'qnui/lib/tab';
import Notice from 'qnui/lib/notice';
import Button from 'qnui/lib/button';
import Icon from 'qnui/lib/icon';
import { Row, Col } from 'qnui/lib/grid';
import Tools from 'utils/index';
import linkConfig from 'utils/urls';
import './index.scss';
const links = Tools.isLocal() ? linkConfig.local : linkConfig.onLine;

class Home extends React.Component {
	constructor(props) {
		super(props);
	}
  render() {
		 var general = this.props.location.query.group=="general"?"block":"none";
		 var qrcode = this.props.location.query.group=="qrcode"?"block":"none";
		 if(this.props.location.query.group==undefined){
			 general="block";
			 qrcode="block";
		 }
    return <div className="home-page">
		<MainNotice />
		<Row style={{display:general}} >
		<div className="next-notice next-notice-prompt next-notice-standalone next-notice-medium next-notice-only-content notice-enter notice-enter-active" style={{marginTop: "5px", background:"rgb(232, 249, 232)", height:"44px"}}>
			<i className="next-icon next-icon-prompt next-icon-medium next-notice-symbol"></i>
			<div className="next-notice-content">普通活动，直接显示在店铺内和搜索结果中。</div>
		</div>
			<Row className="top5" type="across">
	          <Col span="8" className="active">
					<Row className="top5 active-type info">
						<Col span="4" align="center" className="icon iconfont">
							&#xe630;
						</Col>
						<Col>
							<h2>限时折扣</h2>
							<p>不限活动时间</p>
							<p>任意折扣</p>
							<p>支持全店参与、类目参与</p>
						</Col>
					</Row>
					<Row className="top5 active-type button">
						<Link to="zhekou1" style={{color:"#FFF",margin:"auto"}}>
							<Button type="primary" size="large">
							创建活动
							</Button>
						</Link>
					</Row>
				</Col>
				{/**/}
	            <Col span="8" className="active">
					<Row className="top5 active-type info">
						<Col span="4" align="center" className="icon iconfont">
							&#xe612;;
						</Col>
						<Col>
							<h2>满打折/包邮</h2>
							<p>满n件/元，减钱、打折、包邮</p>
							<p>支持多级优惠</p>
							<p>支持全店参与、类目参与</p>
						</Col>
					</Row>
					<Row className="top5 active-type button">
						<Link to={{pathname:"mjs1",state:{createNew:"true"}}} style={{color:"#FFF",margin:"auto"}}>
							<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
						</Link>
					</Row>
				</Col>
				
	            <Col span="8" className="active">
					<Row className="top5 active-type info">
						<Col span="4" align="center" className="icon iconfont">
							&#xe629;
						</Col>
						<Col>
							<h2>限购优惠</h2>
							<p>指定商品限购N件</p>
							<p>超过N件恢复原价</p>
							<p></p>
						</Col>
					</Row>
					<Row className="top5 active-type button">
						<Link to={{pathname:"zhekou_limit_step1",state:{createNew:"true"}}} style={{color:"#FFF",margin:"auto"}}>
							<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
						</Link>
					</Row>
				</Col>
	        </Row>
			{/*
			<Row className="top5" type="across">
				
	            <Col span="8" className="active">
					<Row className="top5 active-type info">
						<Col span="4" align="center" className="icon iconfont">
							&#xe636;
						</Col>
						<Col>
							<h2>预热打折</h2>
							<p>预热期间只能加入购物车</p>
							<p title="设置一个定时上架">不能购买</p>
							<p>到指定时间立即开始折扣</p>
						</Col>
					</Row>
					<Row className="top5 active-type button">
						<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
					</Row>
				</Col>
	            <Col span="8" className="active">
					<Row className="top5 active-type info">
						<Col span="4" align="center" className="icon iconfont">
							&#xe619;
						</Col>
						<Col>
							<h2>循环打折</h2>
							<p>每天指定打折时间，持续7天</p>
							<p>任意折扣</p>
							<p>支持全店参与、类目参与</p>
						</Col> 
					</Row>
					<Row className="top5 active-type button">
						<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
					</Row>
				</Col>
				
	            <Col span="8" className="active">
						<Row className="top5 active-type info">
							<Col span="4" align="center" className="icon iconfont">
								&#xe692;
							</Col>
							<Col>
								<h2>付款折扣 <Icon type="category" /><Icon type="help" /></h2>
								<p>对每一位客户，每当成功付款之后，立即享有指定折扣。</p>
							</Col>
						</Row>
						<Row className="top5 active-type button"  justify="center" align="center" >
							<a href={links.qrring}>
								<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
							</a>
						</Row>
					</Col>
	        </Row>
			*/}
	        <Row  className="top5" type="across">
			      <Col span="8" className="active">
						<Row className="top5 active-type info">
							<Col span="4" align="center" className="icon iconfont">
								&#xe619;
							</Col>
							<Col>
								<h2>付款倒计时折扣</h2>
								<p>对每一位客户，每当成功付款之后，立即有N分钟享受折扣的时间。倒计时结束，取消优惠</p>
							</Col> 
						</Row>
						<Row className="top5 active-type button" justify="center" align="center">
							<Link to="/ring_tags_step1">
								<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
							</Link>
						</Row>
					</Col>
					{/*
	            <Col span="8" className="active">
							<Row className="top5 active-type info">
								<Col span="4" align="center" className="icon iconfont">
									&#xe692;
								</Col>
								<Col>
									<h2>付款倒计时折扣 <Icon type="category" /><Icon type="help" /></h2>
									<p>对每一位客户，每当成功付款之后，立即有N分钟享受折扣的时间。倒计时结束，取消优惠</p>
								</Col>
							</Row>
							<Row className="top5 active-type button"  justify="center" align="center" >
								<Link to="/ring_tags_step1"><Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button></Link>
							</Row>
					</Col>
				   */}
	        	</Row>
        </Row>
        

		<Row style={{display:qrcode}} >
				<div className="next-notice next-notice-prompt next-notice-standalone next-notice-medium next-notice-only-content notice-enter notice-enter-active" style={{marginTop:"5px",height:"44px"}}>
					<i className="next-icon next-icon-prompt next-icon-medium next-notice-symbol"></i>
					<div className="next-notice-content">手机促销活动，均带有二维码，可能产生额外费用。</div>
				</div>
				{/*
        		<Row className="top5" type="across">
                    <Col span="8" className="active">
        				<Row className="top5 active-type-a info">
        					<Col span="4" align="center" className="icon iconfont">
        						&#xe630;
        					</Col>
        					<Col>
        						<h2>限时折扣</h2>
        						<p>不限活动时间</p>
        						<p>任意折扣</p>
        						<p>支持全店参与、类目参与</p>
        					</Col>
        				</Row>
        				<Row className="top5 active-type-a button">
        					<Link to="zhekou1" style={{color:"#FFF",margin:"auto"}}>
        						<Button type="primary" size="large">
        						创建活动
        						</Button>
        					</Link>
        				</Row>
        			</Col>
                    <Col span="8" className="active">
        				<Row className="top5 active-type-a info">
        					<Col span="4" align="center" className="icon iconfont">
        						&#xe612;;
        					</Col>
        					<Col>
        						<h2>满打折/包邮</h2>
        						<p>满n件/元，减钱、打折、包邮</p>
        						<p>支持多级优惠</p>
        						<p>支持全店参与、类目参与</p>
        					</Col>
        				</Row>
        				<Row className="top5 active-type-a button">
        					<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
        				</Row>
        			</Col>
        			
                    <Col span="8" className="active">
        				<Row className="top5 active-type-a info">
        					<Col span="4" align="center" className="icon iconfont">
        						&#xe629;
        					</Col>
        					<Col>
        						<h2>限购优惠</h2>
        						<p>指定商品限购N件</p>
        						<p>超过N件恢复原价</p>
        						<p></p>
        					</Col>
        				</Row>
        				<Row className="top5 active-type-a button">
        					<Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button>
        				</Row>
        			</Col>
                </Row>
				*/}
        		<Row className="top5" type="across">
                    <Col span="8" className="active">
        				<Row className="top5 active-type-a info">
        					<Col span="4" align="center" className="icon iconfont">
        						&#xe692;
        					</Col>
        					<Col>
        						<h2>倒计时折扣</h2>
        						<p>对每一位客户，填写完整的用户名后，立即有N分钟享受折扣的时间。倒计时结束，取消优惠</p>
        					</Col>
        				</Row>
        				<Row className="top5 active-type-a button"  justify="center" align="center" >
        					<a href={links.qrring}><Button type="primary" size="large" style={{margin:"auto"}}>创建活动</Button></a>
        				</Row>
        			</Col>
                </Row>
                </Row>
    </div>;
  }
}

export default connect((state)=> {
  return {
    home: state.home
  };
})(Home);
